<template>
  <div id="SceneView">
    <div id="mapView"></div>
  </div>
</template>

<script>
import InitArcGisJs from "../utils/loadGisModules";
export default {
  name: "trackMobile",
  data() {
    return {
      ARCGIS: {}, //arcgis模块
      view: {}
    };
  },
  async created() {
    this.ARCGIS = await InitArcGisJs.init();
    let { Map, TileLayer, SceneView } = this.ARCGIS;
    const map = new Map({
      // basemap: "streets-night-vector",
      // showLabels: true,
      // maxZoom: 15,
      // zoom: 7,
      // minZoom: 6,
      // logo: false,
      // height: "100%",
      // fadeOnZoom: true
    });
    this.map = map;
    const CAMERA_Z = 27000,
      CAMERA_CENTER = [121.45897884146042, 31.246522700030482],
      // VIEW_ZOOM = 6.363478077483849;
      VIEW_ZOOM = 13;
    // VIEW_ZOOM_SPACE = 0.3;
    // 创建地图实例map
    this.view = new SceneView({
      container: "mapView",
      map: this.map,
      qualityProfile: "high"
      // camera: {
      //   position: {
      //     x: CAMERA_CENTER[0],
      //     y: CAMERA_CENTER[1],
      //     z: CAMERA_Z
      //     // spatialReference: { wkid: 102100 }
      //   },
      //   tilt: 0
      // },
      // zoom: VIEW_ZOOM,
      // center: CAMERA_CENTER,
      // qualityProfile: "medium", //  high, medium, low
      // viewingMode: "local",
      // screenSizePerspectiveEnabled: true,
      // highlightOptions: {
      //   haloOpacity: 0
      // }
    });
    var tiledUrl =
      "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer";
    var tiledLayer = new TileLayer({ url: tiledUrl });
    this.map.add(tiledLayer);
    let list = [];
    this.view.on("click", event => {
      var screenPoint = {
        //当前点击的经纬度
        x: event.x,
        y: event.y
      };
      let { longitude: x, latitude: y } = event.mapPoint;
      list.push([x, y]);
      console.log(JSON.stringify(list));
      this.view.hitTest(screenPoint).then(function(response) {
        let { latitude, longitude } = response.ground.mapPoint;
        console.log(response);
        if (response.results.length > 0 && response.results[0].graphic) {
          console.log("这是当前点击的点位信息", response.results);
        }
      });
    });
    this.view.when(
      () => {
        // 地图加载完成
        setTimeout(() => {
          this.view.goTo({
            // 视角切换动画
            center: [121.45897884146042, 31.246522700030482], //终点坐标
            heading: 360, // 面向正南
            z: 10000,
            tilt: 0, //视图角度cos
            zoom: 13 //放大等级
          });
          this.showPotins();
        }, 1000);
        // 撒点动态图
      },
      function(error) {
        console.error(error);
        alert("加载失败,稍后重新加载");
        window.reload();
      }
    );
  },
  mounted() {},
  beforeDestroy() {
    clearInterval(this.flickerTimer);
  },
  methods: {
    showPotins() {
      let { FeatureLayer, Graphic, Point } = this.ARCGIS;
      let pointInfos = [
        {
          id: "001",
          name: "紧急事件1",
          points: [121.42475165545727, 31.22490863769794],
          url:
            "http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"
        },
        {
          id: "002",
          name: "紧急事件2",
          points: [121.47274893053799, 31.258316787058238],
          url:
            "http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"
        },
        {
          id: "003",
          name: "紧急事件3",
          points: [121.52686113969887, 31.22487325358598],
          url:
            "http://www.linfengya.cn/content/uploadfile/202005/thum-e1681588918254.jpg"
        }
      ];

      // #region
      let graphics = pointInfos.map(point => {
        const {
          points: [x, y],
          ...extra
        } = point;
        return new Graphic({
          geometry: {
            type: "point",
            x,
            y,
            spatialReference: {
              wkid: 4326 //统一坐标系
            }
          },
          attributes: { ...point }
        });
      });
      let flickerPointLayer = new FeatureLayer({
        id: "myFeatureLayer",
        source: graphics,
        objectIdField: "MYPOINTOBJECTID",
        fields: [
          { name: "id", alias: "id", type: "string" },
          { name: "url", alias: "url", type: "string" },
          { name: "name", alias: "name", type: "string" },
          { name: "points", alias: "points", type: "xml" }
        ],
        // 暴露出去的参数 * 代表暴露所有
        outFields: ["*"],
        // 弹窗
        popupTemplate: {
          title: event => {
            return "枫枫不疯";
          },
          content: `
            <div>
              <img src='{url}'>
              <p>
                <a style="font-size:28px;color:red;" href="http://www.linfengya.cn/">{name}</a>
              </p>
            </div>
            `
        },
        // 渲染方法
        renderer: {
          type: "unique-value",
          defaultSymbol: {
            // 类型有 图片标记 和 点
            type: "picture-marker",
            // 图片地址
            url: require(`@/assets/images/svg/redlight.svg`),
            // 图片的大小
            width: "30",
            height: "30"
          }
        }
      });
      // #endregion
      this.map.add(flickerPointLayer);
      // 动画
      this.running(flickerPointLayer);
    },
    running(flickerPointLayer) {
      // 动画
      let opacity = 0.1;
      let flag;
      this.flickerTimer = setInterval(() => {
        if (opacity >= 1) flag = false;
        if (opacity <= 0.1) flag = true;
        if (flag) {
          opacity += 0.1;
        } else {
          opacity -= 0.1;
        }
        flickerPointLayer.opacity = opacity;
      }, 80);
    }
  }
};
</script>

<style>
@import "https://js.arcgis.com/4.20/esri/css/main.css";

html,
body,
#mapView {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
#SceneView {
  position: absolute;
  width: 100%;
  height: 100%;
}
.esri-component.esri-attribution.esri-widget {
  display: none;
}
</style>
